<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>白板编辑器</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
<header class="app-header">
    <h1>🚀 白板编辑器</h1>
    <div class="header-actions">
        <button class="action-btn">导出</button>
    </div>
</header>

<div class="toolbar">
    <div class="tool-group">
        <button class="tool-btn active" data-tool="select">👆 选择</button>
        <button class="tool-btn" data-tool="rect">⬜ 矩形</button>
        <button class="tool-btn" data-tool="circle">⭕ 圆形</button>
        <button class="tool-btn" data-tool="line">📏 直线</button>
        <button class="tool-btn" data-tool="brush">✏️ 画笔</button>
        <!-- 已移除: 标记笔按钮 -->
    </div>
    <div class="tool-group separator">
        <button class="action-btn" id="undo-btn" disabled>↩️ 撤销</button>
        <button class="action-btn" id="redo-btn" disabled>↪️ 重做</button>
    </div>
    <div class="tool-group separator">
        <button class="action-btn" id="delete-btn">🗑️ 删除</button>
    </div>
</div>

<div class="app-main">
    <aside class="left-panel">
        <h4>图层</h4>
        <ul id="layer-list" class="layer-list">
            <!-- 图层项将由 JS 动态生成 -->
        </ul>
    </aside>

    <main class="canvas-area">
        <div class="canvas-container" id="canvas-container">
            <canvas id="canvas"></canvas>
        </div>
    </main>

    <aside class="right-panel" id="property-panel">
        <h4>属性</h4>
        <div class="property-group" id="prop-fill-group">
            <label for="prop-fill">填充</label>
            <input type="color" id="prop-fill" value="#cccccc">
        </div>
        <div class="property-group">
            <label for="prop-stroke">描边</label>
            <input type="color" id="prop-stroke" value="#ffffff">
        </div>
        <div class="property-group">
            <label for="prop-stroke-width">粗细</label>
            <input type="range" id="prop-stroke-width" min="0" max="30" value="2">
        </div>
        <div class="property-group">
            <label for="prop-opacity">不透明度</label>
            <input type="range" id="prop-opacity" min="0" max="1" step="0.01" value="1">
        </div>
    </aside>
</div>

<footer class="app-footer">
    <span id="coords">位置: (0, 0)</span>
    <span id="scale">缩放: 100%</span>
</footer>

<!-- 关键改动：先加载第三方库 -->
<script src="js/libs/fabric.min.js"></script>

<!-- 然后加载我们自己的模块化应用 -->
<script type="module" src="js/main.js"></script>
</body>
</html>